<template>
  <div class="container-pt">
    <van-nav-bar
      fixed
      title="修改用户资料"
      @click-left="$router.back()"
      left-arrow
    />
    <van-cell is-link title="头像">
      <van-uploader :after-read="afterRead">
        <van-image
          width="30"
          height="30"
          round
          :src="`http://124.223.14.236:8060/${userinfo.icon}`"
          v-model="fileList"
        />
      </van-uploader>
    </van-cell>
    <van-cell
      is-link
      :value="userinfo.username"
      title="昵称"
      @click="showText = true"
    ></van-cell>
    <van-popup v-model="showText" style="height: 200px" round position="bottom">
      <van-cell-group>
        <van-field
          v-model="usernameValue"
          label="用户名"
          placeholder="请输入用户名"
        />
        <div class="button">
          <div>
            <van-button plain type="primary" @click="showText = false"
              >取消</van-button
            >
          </div>
          <div>
            <van-button
              plain
              type="info"
              icon-position="right"
              @click="onUserName()"
              >确定</van-button
            >
          </div>
        </div>
      </van-cell-group>
    </van-popup>
    <van-cell
      is-link
      :value="userinfo.mobile"
      title="手机号"
      placeholder="请输入短信验证码"
      @click="showTel = true"
    ></van-cell>
    <van-popup v-model="showTel" style="height: 200px" round position="bottom">
      <van-cell-group>
        <van-field v-model="tel" type="tel" label="手机号" />
        <div class="button">
          <div>
            <van-button plain type="primary" @click="showTel = false"
              >取消</van-button
            >
          </div>
          <div>
            <van-button
              plain
              type="info"
              icon-position="right"
              @click="onUserTel()"
              >确定</van-button
            >
          </div>
        </div>
      </van-cell-group>
    </van-popup>
    <van-cell
      is-link
      :value="value"
      title="性别"
      @click="showPicker = true"
    ></van-cell>
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-cell
      is-link
      title="出生年月"
      :label="userinfo.birthday"
      @click="show = true"
    >
    </van-cell>
    <van-popup v-model="show" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onCurrentDate"
        @cancel="show = false"
      />
    </van-popup>
    <van-cell
      is-link
      :label="userinfo.address"
      title="家庭住址"
      @click="showAddress = true"
    ></van-cell>
    <van-popup
      v-model="showAddress"
      style="height: 200px"
      round
      position="bottom"
    >
      <van-field
        clickable
        name="picker"
        label="家庭住址"
        placeholder="点击选择城市"
        :value="userAreaList"
        @click="showAddressArea = true"
      />
      <van-popup v-model="showAddressArea" position="bottom">
        <van-area
          title="家庭住址"
          :area-list="areaList"
          @confirm="onAreaList"
          @cancel="showAddressArea = false"
        />
      </van-popup>
      <van-field
        clickable
        name="picker"
        label="详细地址"
        placeholder="家庭住址"
        v-model="userAddressArea"
      />
      <van-button round type="info" @click="onAddressArea()"
        >确认修改</van-button
      >
    </van-popup>
    <van-cell
      is-link
      :label="userinfo.notes"
      title="个性留言"
      @click="showMessage = true"
    ></van-cell>
    <van-popup
      v-model="showMessage"
      round
      position="bottom"
      safe-area-inset-bottom
    >
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="100"
        placeholder="请输入留言"
        show-word-limit
        style="height: 200px"
      />
      <van-button round type="info" @click="onNotes()">提交</van-button>
    </van-popup>
  </div>
</template>

<script>
import { userInfoApi, userSexApi, userImgApi } from "@/api/user";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      // 页面渲染数据
      userinfo: [],
      // 图片绑定tel
      fileList: [],
      // 日历数据回显
      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: "",
      // 日历绑定
      show: false,
      showText: false,
      usernameValue: "",
      // 绑定sex 数据回显
      value: "",
      // 绑定sex
      showPicker: false,
      // 绑定sex 选择框 数据
      columns: ["男", "女"],
      // sex 返回值 转汉字
      sex: "",
      // 绑定手机号 输入框  数据回显
      tel: "",
      // 手机号绑定  事件
      showTel: false,
      showAddress: false,
      showAddressArea: false,
      areaList,
      userAreaList: "",
      userAddressArea: "",
      showMessage: false,
      message: "",
    };
  },
  methods: {
    // ! 渲染 函数
    async userInfo() {
      let {
        data: { userInfo },
      } = await userInfoApi();
      this.userinfo = userInfo;
      console.log(userInfo);
      this.value = userInfo.sex === 0 ? "男" : "女";
      this.userinfo.notes =
        userInfo.notes !== "" ? this.userinfo.notes : "我就是我不一样的烟火";
      const day = this.userinfo.birthday;
      this.currentDate = new Date(day.replace(/\W/g, ","));
    },
    // ! 头像修改
    async afterRead(file) {
      let fd = new FormData();
      fd.append("file", file.file);
      const {
        data: { savePath },
      } = await userImgApi(fd);
      const { data, errmsg } = await userSexApi({
        id: this.userinfo.id,
        icon: savePath,
      });
      this.$toast.success(errmsg);
      this.userinfo.icon = data.icon;
    },
    // ! 性别选择框
    async onConfirm(value) {
      // console.log(value);
      this.sex = value === "男" ? 0 : 1;
      this.showPicker = false;
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        sex: this.sex,
      });
      this.$toast.success(errmsg);
      // console.log(data);
      // 视图更新
      this.value = data.sex === 0 ? "男" : "女";
    },
    // !  修改姓名
    async onUserName() {
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        username: this.usernameValue,
      });
      // console.log(res);
      this.$toast.success(errmsg);
      this.userinfo.username = data.username;
      this.showText = false;
    }, // !  修改手机号
    async onUserTel() {
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        mobile: this.tel,
      });
      // console.log(res);
      this.$toast.success(errmsg);
      this.userinfo.mobile = data.mobile;
      this.showTel = false;
    },
    // ! 省市区
    onAreaList(values) {
      this.userAreaList = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showAddressArea = false;
      console.log(this.userAreaList);
    },
    // ! 省市区修改
    async onAddressArea() {
      const userAddress = this.userAreaList + this.userAddressArea;
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        address: userAddress,
      });
      console.log(userAddress);
      this.$toast.success(errmsg);
      this.userinfo.address = data.address;
      this.showAddress = false;
    },
    // ! 留言
    async onNotes() {
      if (this.message === "") return this.$toast.fail("请填写留言");
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        notes: this.message,
      });
      this.$toast.success(errmsg);
      this.userinfo.notes = data.notes;
      this.showMessage = false;
    },
    // ! 日期选择
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + "年" + month + "月" + day + "日";
    },
    async onCurrentDate(value) {
      const birthday = this.timeFormat(value);
      const { errmsg, data } = await userSexApi({
        id: this.userinfo.id,
        birthday,
      });
      this.$toast.success(errmsg);
      this.userinfo.birthday = data.birthday;
      this.show = false;
    },
  },
  created() {
    this.userInfo();
  },
};
</script>

<style>
.van-field {
  height: 150px;
}
.button {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>